<template>
  <Panel>
    <template #title> <span>商品列表</span> </template>
    <template #content>
      <div>
        <!-- 1.0 表格渲染 -->
        <el-table :data="tableData" style="width: 100%" size="mini" border>
          <el-table-column type="expand">
            <template v-slot="{ row }">
              <ul>
                <li>
                  <strong>商品ID: </strong> <span>{{ row.id }}</span>
                </li>
                <li>
                  <strong>商品名称: </strong> <span>{{ row.name }}</span>
                </li>
                <li>
                  <strong>所属分类: </strong> <span>{{ row.category }}</span>
                </li>
                <li>
                  <strong>商品价格: </strong> <span>{{ row.price }}</span>
                </li>
                <li>
                  <strong>商品图片: </strong> <span>{{ row.imgUrl }}</span>
                </li>
                <li>
                  <strong>创建时间: </strong> <span>{{ row.ctime }}</span>
                </li>
                <li>
                  <strong>商品评价: </strong> <span>{{ row.rating }}</span>
                </li>
                <li>
                  <strong>商品销量: </strong> <span>{{ row.sellCount }}</span>
                </li>
                <li>
                  <strong>商品描述: </strong> <span>{{ row.goodsDesc }}</span>
                </li>
              </ul>
            </template>
          </el-table-column>
          <el-table-column label="商品名称" prop="name" width="249px">
          </el-table-column>
          <el-table-column label="所属分类" prop="category" width="120px">
          </el-table-column>
          <el-table-column label="商品价格" prop="price" width="80px">
          </el-table-column>
          <el-table-column label="商品图片">
            <template v-slot="{ row }">
              <img :src="baseUrl + row.imgUrl" alt="" />
            </template>
          </el-table-column>
          <el-table-column label="商品描述" prop="goodsDesc" width="300px">
          </el-table-column>
          <el-table-column label="操作" width="150px" fixed="right">
            <template v-slot="{ row }">
              <el-button
                type="primary"
                size="mini"
                @click="
                  $router.push({
                    name: 'proedit',
                    params: { id: row.id, name: 'zs' }
                  })
                "
                >编辑</el-button
              >
              <el-button type="danger" size="mini" @click="delPro(row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 2.0 分页处理 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[2, 5, 10, 15]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </template>
  </Panel>
</template>

<script>
import { getPros, deletePro } from '@/api/pro.js'

export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 5,
      total: 0,
      tableData: [],
      // 显示商品图片的前缀
      baseUrl: 'http://127.0.0.1:5000/upload/imgs/goods_img/'
    }
  },
  created() {
    this.getGoods()
  },
  methods: {
    async getGoods() {
      if (this.tableData.length <= 1 && this.currentPage !== 1) {
        this.currentPage--
      }
      const { data, total } = await getPros({
        currentPage: this.currentPage,
        pageSize: this.pageSize
      })
      console.log(data)
      this.tableData = data
      this.total = total
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.getGoods()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.currentPage = val
      this.getGoods()
    },
    delPro(id) {
      this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const data = await deletePro({ id })
          console.log(data)
          if (data.code === 0) {
            this.getGoods()
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style lang="less" scoped>
.el-pagination {
  margin-top: 30px;
}

img {
  width: 60px;
}

ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  li {
    width: 50%;
    margin: 5px 0;
    font-size: 14px;
    line-height: 22px;

    strong {
      font-weight: 700;
    }
  }
}
</style>
